<template>
  <div>
    <Header
      :currentCity="currentCity"
      :cityList="cityList"
      @confirm="save"
    ></Header>
    <Crumb :crumbListData="crumbListData"></Crumb>
    <div class="content-row">
      <div class="ask-info-content">
        <div class="info-head">
          <div class="title">
            <h1>{{ infoData.content }}</h1>
            <p>{{ infoData.userName || '✖✖✖✖✖✖✖✖✖✖用户' }}&nbsp;&nbsp;&nbsp;&nbsp;{{ infoData.createdTimeNow?`发布于：${infoData.createdTimeNow}`:'' }}</p>
          </div>
          <div class="head-answer">
            <el-button type="primary" @click="popupproblem.show = true"
              >我要回答</el-button
            >
          </div>
        </div>
        <div class="info-desc">全部{{ infoData.aNum }}个回答</div>
        <div class="info-list">
          <ul>
            <li class="list" v-for="(item, index) in listData" :key="index">
              <div class="acontent-row">
                <div class="acontent">
                  <el-image
                    class="avatar"
                    :src="item.userImg || 'https://v2static.cdn.pulizu.com/defaultAvatar.png'"
                    :alt="item.userName"
                    fit="cover"
                    lazy
                  ></el-image>
                  <span class="author">{{ item.userName || "✖✖✖✖✖✖✖✖✖✖用户" }}</span>
                  <el-button class="label" v-show="item.zzName">{{
                    item.zzName
                  }}</el-button>
                </div>
                <div class="desc">{{ item.aContent || "" }}</div>
                <p class="time">{{ item.createdTimeNow?`发布于：${item.createdTimeNow}`:'' }}</p>
              </div>
              <el-button
                class="assist-btn"
                :class="item.checked ? 'active' : ''"
                round
                @click="assistBtn(index)"
                :disabled="item.checked"
                >有用</el-button
              >
            </li>
          </ul>
        </div>
        <div class="info-more">
          <el-button
            class="info-more-a"
            @click="moreBtn"
            :disabled="moreDisabled"
            >{{ moreText }}</el-button
          >
        </div>
        <!-- 关键区域，街道，周边 -->
        <keywordBox :currentCity="currentCity" :prefixUrl="prefixUrl" :regionList="regionList"></keywordBox>
      </div>
    </div>
    <Footer :currentCity="currentCity"></Footer>
    <!-- 回答弹窗 -->
    <PopupProblem
      :show="popupproblem.show"
      :title="popupproblem.title"
      :content="popupproblem.content"
      :author="popupproblem.author"
      :ctime="popupproblem.ctime"
      :placeholder="popupproblem.placeholder"
      :confirmText="popupproblem.confirmText"
      :disabled="popupproblem.disabled"
      :textareaValue="popupproblem.textareaValue"
      @close="popupproblem.show = false"
      @confirm="popupproblemConfirm"
    ></PopupProblem>
    <!-- 回答成功弹窗 -->
    <PopupProblemSuccess
      :show="popup.show"
      :cover="popup.cover"
      :title="popup.title"
      :desc="popup.desc"
      :confirmText="popup.confirmText"
      @confirm="
        popup.show = false;
        popupproblem.disabled = false;
      "
    ></PopupProblemSuccess>
  </div>
</template>

<script>
var head = {
  title: "",
  content: "",
  keywords: "",
};
import u from "@/plugins/Ccom";
export default {
  head() {
    return {
      title: head.title,
      meta: [
        { name: "description", content: head.content },
        { name: "keywords", content: head.keywords },
      ],
    };
  },
  validate(ctx) {
    return /^\d+\.html$/.test(ctx.params.id);
  },
  async asyncData(ctx) {
    var currentCity = ctx.currentCity;
    var cityList = ctx.cityList;
    var prefixUrl = ctx.prefixUrl;
    var cityCode = ctx.cityCode;
    var id = ctx.params.id ? parseInt(ctx.params.id.split(".")[0]) : 0;
    var infoData = null;
    var pageNum = 1;
    var pageSize = 10;
    var total = 1;
    var listData = [];
    var crumbListData = [];
    var popupproblem = {
      show: false,
      title: "有问必答",
      content: "",
      author: "",
      ctime: "",
      placeholder: "在这里输入您回答的内容（必填）",
      confirmText: "提交答案",
      textareaValue: "",
    };
    // 获取问题详情
    var getInfoData = await u.http({
      url: "/app/houseInfoQa/queryHouseInfoQaById",
      params: {
        id,
      },
    });
    if (getInfoData.code == 200) {
      getInfoData.data.createdTimeNow = u.formatTime(
        getInfoData.data.createdTime,
        "Y-m-d H:i:s"
      );
      infoData = getInfoData.data;
      popupproblem.content = infoData.content;
      popupproblem.userName = infoData.userName;
      popupproblem.ctime = infoData.createdTimeNow;
    }
    // 修改SEO
    head.title = `${infoData.content} - ${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖你问我答`;
    head.keywords = infoData.content;
    head.content = `${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖问答频道，为您解答：${infoData.content}，${infoData.aContent}`;
    // 获取回答列表
    var getListData = await u.http({
      url: "/app/houseInfoQaA/queryHouseQaAList",
      params: {
        pageNum,
        pageSize,
        id,
      },
    });
    if (getListData.code == 200) {
      total = Math.ceil(getListData.data.total / pageSize);
      getListData.data.list.forEach((item) => {
        item.checked = false;
        item.createdTimeNow = u.formatTime(item.createdTime, "Y-m-d H:i:s");
      });
      listData = getListData.data.list;
    }
    // 修改栏目信息
    crumbListData = [
      {
        title: `${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖`,
        href: prefixUrl,
      },
      {
        title: `${currentCity.cityName}你问我答`,
        href: `${prefixUrl}/nwwd/`,
      },
      {
        title:
          infoData.content.length > 8
            ? `${infoData.content.substr(0, 8)}...`
            : infoData.content,
        href: prefixUrl + ctx.route.path,
      },
    ];

    return {
      currentCity,
      cityList,
      prefixUrl,
      cityCode,
      crumbListData,
      id,
      infoData,
      pageNum,
      pageSize,
      total,
      listData,
      popupproblem,
      regionList: ctx.regionList
    };
  },
  data() {
    return {
      textareaValue: "",
      popup: {
        show: false,
        cover:
          "https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20210907/8b2e500aa48e4a29abbc68cd53059a7f.png",
        title: "提交成功",
        desc: "您的问题已提交后台审核",
        confirmText: "确认",
      },
      moreDisabled: false,
      moreText: "加载更多",
    };
  },
  methods: {
    // 点赞按钮
    assistBtn(index, id) {
      if (!localStorage.getItem("userInfo")) {
        setTimeout((e) => {
          document.querySelector("#login").click();
        }, 300);
        return false;
      }
      this.listData[index].checked = true;
      this.saveAssist(id);
    },
    // 提交点赞
    saveAssist(id) {
      u.http({
        client: true,
        url: "/app/houseInfoQaA/addHouseQaACNum",
        headers: {
          token: localStorage.getItem("token") || "",
        },
        params: {
          id,
        },
      }).then();
    },
    // 回答问题按钮
    popupproblemConfirm(e) {
      this.textareaValue = e;
      var nowE = e.replace(new RegExp(/\s/, "g"), "");
      if (nowE == "") {
        this.$message({
          message: "请输入您回答的内容",
          type: "warning",
        });
        return false;
      }
      if (!localStorage.getItem("userInfo")) {
        setTimeout((e) => {
          document.querySelector("#login").click();
        }, 300);
        return false;
      }
      this.save();
    },
    // 提交
    save() {
      this.popupproblem.disabled = true;
      this.popupproblem.show = false;
      u.http({
        client: true,
        url: "/app/houseInfoQaA/addHouseInfoQaA",
        headers: {
          token: localStorage.getItem("token") || "",
        },
        params: {
          qaId: this.id,
          aContent: this.textareaValue,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.popupproblem.textareaValue = "";
          setTimeout((e) => {
            this.popup.show = true;
          }, 300);
          return false;
        }
        this.$message({
          message: res.msg,
          type: "error",
        });
      });
    },
    // 加载更多
    moreBtn() {
      if (this.pageNum >= this.total) {
        this.moreText = "没有数据了";
        return false;
      }
      this.pageNum++;
      this.getListData();
    },
    // 获取回答列表
    getListData() {
      this.moreDisabled = true;
      u.http({
        client: true,
        url: "/app/houseInfoQaA/queryHouseQaAList",
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          id: this.id,
        },
      }).then((res) => {
        if (res.code == 200) {
          res.data.list.forEach((item) => {
            item.checked = false;
            item.createdTimeNow = u.formatTime(item.createdTime, "Y-m-d H:i:s");
          });
          this.listData = [...this.listData, ...res.data.list];
          setTimeout((e) => {
            this.moreDisabled = false;
          }, 300);
          return false;
        }
        this.$message({
          message: res.msg,
          type: "error",
        });
        setTimeout((e) => {
          this.moreDisabled = false;
        }, 300);
      });
    },
  },
};
</script>